<template>
	<view class="flex-col page">
		<view>
			<!-- <view :style="{height:statusBarHeight+44+'px'}"></view> -->
			<u-navbar :bgColor="setBgColor()" @leftClick="$nav(2)">
			</u-navbar>
		</view>
		<view style="min-height: 45vh;">
			<u-swiper v-if="goodsDetail.imgs" height="450" @click="goodsImgClick" :autoplay="false" indicator indicatorMode="line" keyName="file_url" :list="goodsDetail.imgs.length==0?[goodsDetail.img_url]:goodsDetail.imgs"></u-swiper>
		</view>
		

		
		
		
		
		
		
		<view class="price_sty">
			<view class="flex-row justify-between">
				<view class="flex-row items-center">
					<view style="font-size: 35rpx;color: red;font-weight: bold;">平台价:¥{{goodsDetail.sell_price ? goodsDetail.sell_price : 0}}</view>
					<view style="font-size: 22rpx;color: #555;margin-left: 12rpx;text-decoration-line: line-through;">市场价:¥{{goodsDetail.old_price ? goodsDetail.old_price : 0}}</view>
				</view>
				
				<view class="flex-col items-center" @click="collet">
					<u-icon :name="isCollect ? 'star-fill' : 'star'" :color="isCollect ? '#5c8edc' : '#999'" size="23"></u-icon>
					<view style="font-size: 22rpx;">收藏</view>
				</view>
			</view>
			
			<view class="pro_tit">{{goodsDetail.name}}</view>
			<!-- <view class="pro_tit_t">{{goodsDetail.title}}</view> -->
			
		</view>
		<view class="cont_sty">
			<view class="flex-row justify-between" style="margin-bottom: 30rpx;">
				<view class="flex-row items-center">
					<view>规格</view>
					<view style="margin-left: 45rpx;font-size: 28rpx;width: 45vw;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{specText}}</view>
				</view>
				
				<view @click="selectSpec" class="flex-row items-center" style="color: #999;font-size: 28rpx;">
					<view>选择规格</view>
					<u-icon name="arrow-right" size="18"></u-icon>
				</view>
				
			</view>
			
			<view class="spw_flex">
				<text class="font_col">数量</text>
				<view>
					<u-number-box @change="number_box_change" v-model="num_value"></u-number-box>
				</view>
			</view>
			<view class="flex-row" style="margin-top: 10rpx;">
				<text class="font_col">库存</text>
				<text style="color: #999;padding-left: 50rpx;font-size: 28rpx;">{{goodsDetail.stock ? goodsDetail.stock : '0'}}</text>
			</view>
			<view class="flex-row" style="margin-top: 10rpx;">
				<text class="font_col">销量</text>
				<text style="color: #999;padding-left: 50rpx;font-size: 28rpx;">{{Number(goodsDetail.sales_volume)+ Number(goodsDetail.unreal_sales_volume)}}件</text>
			</view>
			<view v-if="goodsDetail.shipping" class="flex-row" style="margin-top: 10rpx;">
				<text class="font_col">运费</text>
				<text style="color: #999;padding-left: 50rpx;font-size: 28rpx;width: 80%;">{{goodsDetail.section_id == 2 ? '线下核销' :goodsDetail.shipping}}</text>
			</view>
			<view v-if="goodsDetail.shipping" class="flex-row" style="margin-top: 10rpx;">
				<text class="font_col">服务</text>
				<!-- <text style="color: #999;padding-left: 50rpx;font-size: 28rpx;width: 80%;">{{goodsDetail.is_support_return == 0 ? '不支持七天无理由退货(非质量问题不予退换)':'支持七天无理由退货'}}</text> -->
				<text style="color: #999;padding-left: 50rpx;font-size: 28rpx;width: 90%;">{{service}}</text>
			</view>
			<view class="flex-row items-baseline" style="margin-top: 10rpx;">
				<text class="font_col">配送</text>
				<view class="warp">
					<text style="font-size: 28rpx;color: red">{{shipType()}}</text>
					<!-- <view v-for="(se,index) in serverList" :key="index" class="flex-item">
						<view style="font-size: 28rpx;">{{se.name}}</view>
					</view> -->
				</view>
			</view>
			<view v-if="goodsDetail.product_care" class="flex-row" style="margin-top: 10rpx;">
				<text class="font_col">温馨提示</text>
				<text style="color: #999;padding-left: 50rpx;font-size: 28rpx;width: 80%;">{{goodsDetail.product_care}}</text>
			</view>
		</view>
		
		<view class="shop-bg" @click="goShopHome">
			<view class="flex-row items-center">
				<image class="shop-logo" :src="shopInfo.shop_logo ? shopInfo.shop_logo : '/static/merchant_logo.png'"></image>
				<view class="flex-row justify-between" style="margin-left: 10rpx;width: 80%;">
					<text>{{shopInfo.shop_title}}</text>
					<u-icon name="arrow-right" size="18"></u-icon>
					<!-- <text style="font-size: 26rpx;color: #999;margin-top: 10rpx;">{{shopInfo.cust_addr}}</text> -->
				</view>
			</view>
		</view>
		
		<!--评价-->
		<view class="comment">
			<view class="flex-row justify-between items-center" @click="goComment">
				<view style="font-size: 28rpx;color: #000;">评价({{reviews.count ? reviews.count : 0}})</view>
				<view class="flex-row items-center">
					<view style="font-size: 28rpx;color: #000;">好评</view>
					<view style="font-size: 26rpx;color: #5c8edc;">{{reviews.positiveRating}}</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="line"></view>
			<view class="flex-col items-center" style="margin-top: 50rpx;" v-if="reviewsList.length == 0">
				<text style="font-size: 26rpx;">暂无评价</text>
				<view class="pj-bg" @click="goComment">全部评价</view>
			</view>
			
			<view v-else style="margin-top: 20rpx;" class="flex-col">
				<view class="flex-col" v-for="(re,ri) in reviewsList" :key="ri" style="margin-top: 50rpx;">
					<view class="flex-row">
						<image :src="re.avatar ? re.avatar :  staticResource('user/default_avatar.jpg')" style="width: 60rpx;height: 60rpx;border-radius: 35rpx;"></image>
						
						<view class="flex-col" style="margin-left: 20rpx;width: 90%;">
							<text>{{re.nickname}}</text>
							<view>
								<u-rate active-color="#5c8edc" inactive-color="#b2b2b2" :value="re.star" readonly gutter="3"></u-rate>
							</view>
							<text style="margin-top: 20rpx;margin-right: 40rpx;">{{re.comment}}</text>
							
							<view v-if="re.img_url">
								<image class='img_wrap_one' :src="re.img_url" @click="clickImg(re.img_url)"  style="margin-top: 10rpx;border-radius: 5rpx;"/>
							</view>
							<view v-else></view>
							
							<view style="color: #555;font-size: 23rpx;margin-top: 10rpx;">{{re.create_date}}</view>
						</view>
					</view>
				</view>
				
				<view class="pj-all-btn" @click="goComment">查看全部评价></view>
			</view>
		</view>
		
		<view class="content">
			<view style="color: #5c8edc;">商品介绍</view>
			<view class="line"></view>
			<!-- <view class="rich_text" v-html="goodsDetail.content"></view> -->
			<mp-html :content="goodsDetail.content"></mp-html>
		</view>
		
		
		
		<echone-sku
		  ref="echone_sku"
		  :show="popupShow"
		  :discount='discount'
		  :gType="gType"
		  :combinations="combinations"
		  :specifications="specifications"
		  :specifications-props="specificationsProps"
		  :goods_id='goodsDetail.goods_id'
		  @box_change="box_change"
		  @close="handleClose"
		  @confirm="handleConfirm"
		  @confirmCart="handleCart"
		  @isRefresh="isRefresh"
		></echone-sku>
		
		
		<!-- <view class="bot_sty" @click="submit">立即购买</view> -->
		<view class="bot_sty">
			
			<view v-if="gType == 1" class="flex-row items-center" style="margin-left: 35rpx;margin-right: 35rpx;">
				<view class="b-left" @click="clickKf">
					<image src="/static/shop_phone.png" style="width: 35rpx;height: 35rpx;margin-left: 6rpx;"></image>
					<text style="color: #000;margin-top: 5rpx;font-size: 25rpx;text-align: left;">客服</text>
				</view>
				<view style="width: 70%;" class="flex-row">
					<view class="buy-now2" @click="submit">立即购买</view>
				</view>
				
			</view>
			
			<view v-else class="flex-row items-center" style="margin-left: 35rpx;margin-right: 35rpx;">
				<view class="b-left" @click="clickKf">
					<image src="/static/shop_phone.png" style="width: 35rpx;height: 35rpx;margin-left: 6rpx;"></image>
					<text style="color: #000;margin-top: 5rpx;font-size: 25rpx;text-align: left;">客服</text>
				</view>
				<view style="width: 70%;" class="flex-row">
					<view class="in-cart" @click="inCart">加入购物车</view>
					<view class="buy-now" @click="submit">立即购买</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import throttle from '../../uni_modules/uview-ui/libs/function/throttle';
	import echoneSku from '@/components/echone-sku/echone-sku.vue'
	export default {
		data() {
			return {
				service:'',
				combinations:[],
				reviews:{},
				reviewsList:[],
				themeColor:'#5c8edc',
				specificationsProps:{
					id:'spec_id',
					name:'name',
					list:'children',
				
				},
				specifications:[],
				popupShow:false,
				
				goods_id: '',
				goodsDetail:{},
				num_value:1,
				commodity_data:{},
				discount:'0',
				purchase:'0',
				type:1,
				isCollect:false,
				gType:0,
				showNavbar:false,
				shopInfo:{},
				specText:''
			};
		},
		components: {
		   echoneSku,
		},
		onLoad(op) {
			this.goods_id = op.goods_id;
			this.gType = op.goodsType;
			console.log('goodsType:'+this.gType);
		},
		onShow() {
			this.getGoodsDetail();
		},
		computed:{
			statusBarHeight() {
				return this.$store.state.statusBarHeight
			}
		},
		// onPageScroll(e) {
		// 	if (e.scrollTop > 80) {
		// 		// console.log(111);
		// 		this.showNavbar = true;
		// 	} else {
		// 		// console.log(222);
		// 		this.showNavbar = false;
		// 	}
		// },
		methods:{
			shipType(){
				if(this.goodsDetail.section_id == 2){
					return '线下核销'
				}else{
					if(this.goodsDetail.shipping_method == 1){
						return '物流'
					}else if(this.goodsDetail.shipping_method == 2){
						return '线下采购'
					}else if(this.goodsDetail.shipping_method == 3){
						return '配送'
					}else if(this.goodsDetail.shipping_method == 4){
						return '无需配送'
					}
				}
			},
			///进入店铺
			goShopHome(){
				// let shop = JSON.stringify(this.shopInfo)
				uni.navigateTo({
					url:'/pages/shop_home/shop_home?title=' + this.shopInfo.shop_title + '&id=' + this.shopInfo.shop_id
				})
			},
			isRefresh(val){
				this.specText = val;
			},
			selectSpec(){
				if(this.specifications.length == 0){
					this.$u.toast('暂无规格')
					return;
				}
				this.popupShow = true
			},
			clickKf(){
				uni.makePhoneCall({
					phoneNumber:this.shopInfo.kefu_phone
				})
			},
			goodsImgClick(index){
				if(this.goodsDetail.imgs.length==0){
					uni.previewImage({
						urls:[this.goodsDetail.img_url],
					})
				}else{
					uni.previewImage({
						urls:[this.goodsDetail.imgs[index].file_url],
					})
				}
			},
			///收藏
			collet(){
				this.$request({
					url:'?c=Goods&a=goodsCollect',
					type:'post',
					data:{
						goods_id:this.goods_id
					}
				}).then(res =>{
					if(res.data == 1){
						this.isCollect = true
					}else{
						this.isCollect = false
					}
				})
			},
			
			goComment(){
				uni.navigateTo({
					url:'/pages/comment/comment?goods_id='+this.goods_id
				})
			},
			handleToHome(){
				uni.switchTab({ url: "/pages/index/index" });	
			},
			handleToCart(){
				uni.switchTab({ url: "/pages/cart/index" });	
			},
			clickImg(url){
				uni.previewImage({
					urls:[url],
				})
			},
			
			box_change(val){
				this.num_value=val
				console.log(val)
			},
			number_box_change(){
				this.$refs.echone_sku.buyCount=this.num_value
				
			},
			handleClose(){
				this.popupShow=false
			},
			
			///多规格弹起选中后跳转下单
			handleConfirm(val){
				this.commodity_data.sku_id=val.sku_id
				this.commodity_data.order_number=val.order_number
				this.commodity_data.sku_name=val.sku_name
				this.commodity_data.image=val.image
				this.commodity_data.sell_price=val.sell_price
				///商品类型 1普通商品 2卡密商品3虚拟商品
				this.commodity_data.goods_type = val.goods_type
				this.commodity_data.free_shipping = val.free_shipping
				this.commodity_data.fixed_shipping_type = val.fixed_shipping_type
				this.commodity_data.fixed_shipping_fee = val.fixed_shipping_fee
				this.commodity_data.shipping_method = val.shipping_method
				if(val.sku_stock == 0){
					uni.showToast({
						title:'库存不足',
						icon:'error'
					})
					return;
				}
				
				
				
				this.$request({
					url:'?c=User&a=defaultAddress',
					type:'post'
				}).then(res =>{
					let pack = encodeURIComponent(JSON.stringify(this.commodity_data))
					///下单页
					uni.navigateTo({
						url: '/pages/order_allocation/order_allocation?pack='+pack
					})
				})
				
				
				
				// console.log("val:"+val)
			},
			///多规格弹起选中后加入购物车
			handleCart(val){
				this.singleToCart(val.sku_id,val.order_number);
			},
			getGoodsDetail(){
				this.$request({
					url:'?c=Goods&a=goodsInfo',
					type:'get',
					data:{
						goods_id:this.goods_id
					}
				}).then(res =>{
					console.log(res)
					this.goodsDetail = res.data.goods;
					this.service = res.data.service;
					this.reviews = res.data.reviews;
					this.reviewsList = this.reviews.info;
					this.shopInfo = res.data.shop;
					this.commodity_data={
						name:this.goodsDetail.name,
						// sell_price:this.goodsDetail.sell_price
					}
					this.specifications=this.goodsDetail.spec
					if(this.goodsDetail.is_collect){
						this.isCollect = true
					}else{
						this.isCollect = false
					}
					
					///详情页展示规格
					if(this.specifications.length == 0){
						this.specText = '暂无规格'
					}else if(this.specifications.length==1&&this.specifications[0].children.length==1){///单规格
						this.specText = this.specifications[0].children[0].name
					}else{
						this.specText = this.specifications[0].children[0].name
					}
					
				});
			},
			
			///单规格直接加入购物车
			inCart(){
				if(this.specifications.length==1&&this.specifications[0].children.length==1){ ///单规格
					
					let temp = {};
					temp.sku_id = {}
					temp.sku_id[String(this.specifications[0].spec_id)]=this.specifications[0].children[0].spec_id
					
					///先查询sku获取skuid
					this.$request({
						url: '?c=Goods&a=skuSearch',
						type:'post',
						data: {
							goods_id:this.goods_id,
							spec_id:JSON.stringify(temp.sku_id) 
						}
					}).then(res => {
						
						this.singleToCart(res.data.sku_id,this.num_value);
					})
					
				}else{
					this.popupShow=true
				}
			},
			
			
			singleToCart(skuId,count){
				this.$request({
					url:'?c=Cart&a=addCart',
					type:'post',
					data:{
						sku_id:skuId,
						order_number:count,
						goods_id:this.goods_id
					}
				}).then(res =>{
					uni.showToast({
						title:'加入成功'
					})
					this.$store.commit('setCartUpdate',true);
					// console.log(res);
				})
			},
			
			
			///单规格直接跳转下单
			submit() {
				let that  = this;
				if(that.specifications.length == 0){
					that.$u.toast('暂无规格')
					return;
				}
				if(that.specifications.length==1&&that.specifications[0].children.length==1){
					
					throttle(function(){
						that.commodity_data.sku_id={}
						that.commodity_data.sku_name={}
						that.commodity_data.order_number=that.num_value
						that.commodity_data.sku_id[String(that.specifications[0].spec_id)]=that.specifications[0].children[0].spec_id
						that.commodity_data.sku_name[String(that.specifications[0].spec_id)]=that.specifications[0].children[0].name
						that.commodity_data.image=that.goodsDetail.img_url
						
						that.$request({
							url: '?c=Goods&a=skuSearch',
							type:'post',
							data: {
								goods_id:that.goods_id,
								spec_id:JSON.stringify(that.commodity_data.sku_id) 
							}
						}).then(res => {
							that.commodity_data.sku_id=res.data.sku_id
							that.commodity_data.sell_price=res.data.sku_sell_price
							that.commodity_data.sku_name = res.data.spec_name
							///商品类型 1普通商品 2卡密商品3虚拟商品
							that.commodity_data.goods_type = res.data.goods_type
							that.commodity_data.free_shipping = res.data.free_shipping
							that.commodity_data.fixed_shipping_type = res.data.fixed_shipping_type
							that.commodity_data.fixed_shipping_fee = res.data.fixed_shipping_fee
							that.commodity_data.shipping_method = res.data.shipping_method
							
							if(res.data.sku_stock == 0){
								uni.showToast({
									title:'库存不足',
									icon:'error'
								});
								return;
							}
							that.$request({
								url:'?c=User&a=defaultAddress',
								type:'post'
							}).then(res =>{
								///跳转下单页
								uni.navigateTo({
									url: '/pages/order_allocation/order_allocation?pack='+ encodeURIComponent(JSON.stringify(that.commodity_data)) 
								})
							})
						})
					},1000)
				}else{
					that.popupShow=true
				}
			},
			setBgColor() {
				if (this.showNavbar) {
					return "#fff";
				} else {
					return "rgba(0,0,0,0)";
				}
			},
			staticResource(path){
				return "https://ysmz.scmzhc.com/static/mini/images/"+path;
			}
		}
	}
</script>

<style lang="scss" scoped>
.page {
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	height: 100%;
	background-color: #F5F5F5;
}
.bot_sty {
		position: fixed;
		left: 0;
		bottom: 0;
		height: 140rpx;
		// line-height: 90rpx;
		width: 100%;
		text-align: center;
		color: white;
		background-color: #fff;
		padding-top: 20rpx;
	}

	.font_col {
		color: #7c7c7c;
		font-size: 26rpx;
	}

	.rich_text {
		padding: 20rpx;
		padding-bottom: 100rpx;
		width: 100%;
		img{
			max-width: 100% !important;
		}
	}

	.spw_flex {
		// padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
	}

	.pl_70 {
		padding-left: 70rpx;
	}

	.pl_20 {
		padding-left: 20rpx;
	}

	.inventory {
		padding: 30rpx 0;
		font-size: 24rpx;
		color: #9d9d9d;
	}

	.cont_sty {
		padding: 10rpx 30rpx;
		background-color: #fff;
		padding: 20rpx 20rpx 30rpx 30rpx;
		margin-left: 15rpx;
		margin-left: 15rpx;
		margin-right: 15rpx;
		border-radius: 15rpx;
	}

	.pro_tit {
		overflow: hidden;
		// white-space: nowrap;
		// text-overflow: ellipsis;
		font-size: 36rpx;
		font-weight: bold;
	}

	.pro_tit_t {
		overflow: hidden;
		// white-space: nowrap;
		color: #999;
		margin-top: 8rpx;
		// text-overflow: ellipsis;
	}
	.price_sty {
		background-color: #fff;
		padding: 20rpx 20rpx 30rpx 30rpx;
		margin: 15rpx;
		border-radius: 15rpx;
	}

	.price_font {
		font-size: 40rpx;
		font-weight: bold;
	}

	.through {
		text-decoration: line-through;
	}
	.warp{
		padding-left: 50rpx;
		padding-right: 40rpx;
		display: flex;
	    flex-wrap: wrap;
		word-wrap: break-word;
		width: 100%;
		gap: 20rpx;
	}
	.flex-item{
		// width: 22%;
		word-wrap: break-word;
		// margin: 10rpx;
		// flex: 0 0 20%;
		// display: flex;
		// flex-direction: row;
		// align-items: center;
	}
	.comment{
		background-color: #fff;
		padding: 20rpx 20rpx 30rpx 30rpx;
		margin: 15rpx;
		border-radius: 15rpx;
	}
	.shop-bg{
		background-color: #fff;
		padding: 20rpx 20rpx 30rpx 30rpx;
		margin: 15rpx 15rpx 0rpx 15rpx;
		border-radius: 15rpx;
	}
	.shop-logo{
		width: 100rpx;
		height: 100rpx;
	}
	.b-left{
		width: 30%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		padding-left: 25rpx;
	}
	.line{
		border: 1px solid #f5f5f5;
		margin-top: 25rpx;
	}
	.pj-bg{
		border-radius: 30rpx;
		border: 1rpx solid #7c7c7c;
		padding: 10rpx 40rpx;
		font-size: 26rpx;
		margin-top: 40rpx;
	}
	.content{
		// display: flex;
		// flex-direction: column;
		text-align: center;
		align-items: center;
		background-color: #fff;
		padding: 20rpx 20rpx 30rpx 30rpx;
		// margin: 15rpx;
		margin: 15rpx 15rpx 150rpx 15rpx;
		border-radius: 15rpx;
	}
	.bottem-btn{
		display: flex;
		color: #000;
		padding-left: 25rpx;
		padding-right: 20rpx;
		font-size: 26rpx;
		text-align: center;
	}
	.bottom-left{
		align-items: center;
		height: 100rpx;
	}
	.in-cart{
		background-color: #dae8fa;
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 70rpx;
		color: #5c8edc;
		border-top-left-radius: 35rpx;
		border-bottom-left-radius: 35rpx;
	}
	.buy-now{
		display: flex;
		align-items: center;
		background-color: #5c8edc;
		color: #fff;
		justify-content: center;
		height: 70rpx;
		width: 50%;
		border-top-right-radius: 35rpx;
		border-bottom-right-radius: 35rpx;
	}
	.buy-now2{
		display: flex;
		align-items: center;
		background-color: #5c8edc;
		color: #fff;
		justify-content: center;
		height: 70rpx;
		width: 100%;
		border-radius: 35rpx;
	}
	.bottom-right{
		width: 100%;
		// justify-content: center;
		justify-content: flex-end;
	}
	.img_wrap {
	    height: 80rpx;
	    width: 26%;
	    margin-right: 2%;
	  }
	
	.img_wrap_one {
	    height: 180rpx;
	    width: 150rpx;
	  }
    .userpic {
	  border-radius: 6px;
	}
	.pj-all-btn{
		color: #555;
		margin-top: 50rpx;
		text-align: center;
	}
</style>
